<template>
  <div class="header_container">
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">{{
        item
      }}</el-breadcrumb-item>
    </el-breadcrumb>
    <MyButton @click="signOut" title="退出登录" type="danger" icon="el-icon-s-check" circle></MyButton>
  </div>
</template>
<script>
export default {
  name: "NavHeader",
  methods: {
    signOut(){
      alert('退出登录')
    }
  },
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.header_container{
  height: 40px;
  display: flex;
  background-color: rgba(0, 0, 0, 0.2);
  justify-content: space-between;
  .breadcrumb{
    height: 40px;
    line-height: 40px;
  }
}
</style>